<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
        <script type="text/javascript">

            // 变量前有$符号的，以及通过$skipArray的都是非监控属性
           var model = avalon.define({
                $id: "test",
                aaa: "1",
                bbb: "2",
                $ccc: "3",//这是非监控属性
                ddd: "4",//这是非监控属性
                $skipArray: ["ddd"],

                click: function(a) {
                    model[a] = new Date - 0
                }
            })
            model.$watch("aaa", function(a, b) {
                console.log("aaa", a, b)
            })
            model.$watch("bbb", function(a, b) {
                console.log("bbb", a, b)
            })
            model.$watch("$ccc", function(a, b) {
                console.log("$ccc", a, b)
            })
            model.$watch("ddd", function(a, b) {
                console.log("ddd", a, b)
            })

            

            // 多个属性的监听共用一个$watch回调。
            var vmodel = avalon.define({
                $id: "test2",
                eee: "5",
                fff: "6",
                click: function(a) {
                    vmodel[a] = new Date - 0
                }
            })
            vmodel.$watch("eee", fn)
            vmodel.$watch("fff", fn)
            function fn(a, b){
               console.log(a, b)
            }



            // 如果属性非常多，我们可以监听$all这个特殊的属性名来得知所有属性的变动状况。
            var model = avalon.define({
                $id: "test3",
                ggg: "7",
                hhh: "8",
                click: function(a) {
                    model[a] = new Date - 0
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })

        </script>
    </head>
    <body>
        <div ms-controller="test" class='ms-hover'>
            <div ms-click="click('aaa')">{{aaa}}</div>
            <div ms-click="click('bbb')">{{bbb}}</div>
            <div ms-click="click('$ccc')">{{$ccc}}</div>
            <div ms-click="click('ddd')">{{ddd}}</div>
        </div>

        <br/>
        <div ms-controller="test2" class='ms-hover'>
            <div ms-click="click('eee')">{{eee}}</div>
            <div ms-click="click('fff')">{{fff}}</div>
        </div>


        <br/>
        <div ms-controller="test3" class='ms-hover'>
            <div ms-click="click('ggg')">{{ggg}}</div>
            <div ms-click="click('hhh')">{{hhh}}</div>
        </div>
    </body>
</html>
